<template>
	<view class="home">
		<view class="u-flex-y-center u-m-t-20 u-p-b-20">
			<!-- <u-text text="全部账单" suffix-icon="/static/images/icon_down.png" iconStyle="width:24rpx;height:24rpx" align="center"
				@click="handleClose"></u-text> -->
			<!-- 			<u-text :text="params.month" suffix-icon="/static/images/icon_down.png" @click="changeTime"
				iconStyle="width:24rpx;height:24rpx" align="center"></u-text> -->
		</view>
		<view class="u-p-t-20 u-p-b-20 u-p-l-30 u-p-r-30" v-for="(item,index) in data.list" :key="item.id">
			<view class="u-flex-y-center">
				<u-text size="32rpx" bold :text="item.name"></u-text>
				<!-- <u-text align="right" size="32rpx" bold :text="item.baoyang_money||'123'"></u-text> -->
				<u-text text="删除" prefix-icon="/static/images/icon_clear.png" size="24rpx" color="#999"
					iconStyle="width:32rpx;height:32rpx;marginRight:10rpx" align="right" @click="_delBaoyang(item)"></u-text>
			</view>
			<u-text :text="`${item.number}  |  ${item.next_kilometer || item.createtime} ${item.next_kilometer?'km':''}`" size="24rpx" color="#999" margin="10rpx 0">
			</u-text>
		</view>
		<u-empty v-if="!data.list.length" ></u-empty>
		<u-popup :show="data.show" @close="handleClose">
			<view class="popup">
				<u-text text="筛选" margin="30rpx " align="center"></u-text>
				<view class="popup-item">
					<u-text text="交易类型" margin="0 0 24rpx" color="#333"></u-text>
					<u-row>
						<u-col span="4" v-for="(item,index) in data.typeList" :key="item.id">
							<view :class="['screen-item',params.type_id == item.id?'screen-item-active':'']"
								@click="changeType(item)">
								{{item.title}}
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="u-flex-y-center u-flex-between u-p-t-30 u-p-b-30">
					<u-button color="#0C9BF4" customStyle="height:80rpx" @click="comfirmLog">确认</u-button>
				</view>
			</view>
		</u-popup>
		<up-datetime-picker :show="data.timeShow" :formatter="formatter" v-model="data.defaultTime" mode="year-month"
			@confirm="confirmTime" @cancel="changeTime"></up-datetime-picker>
	</view>
</template>
<script setup>
	import { onMounted, ref } from "vue";
	import { timeFormat } from 'uview-plus';
	import { baoyangRecord, baoyangType, delBaoyang, secondType } from "../../config/api";
	import { onReachBottom } from '@dcloudio/uni-app'
	const params = ref({
		month: timeFormat(new Date(), 'yyyy-mm'),
		type_id: '', //二级账目类型id
		page: 1,
		limit: 20
	})
	const data = ref({
		timeShow: false,
		defaultTime: Number(new Date()),
		list: []
	})
	onMounted(() => {
		_baoyangRecord()
		_secondType()
	})
	onReachBottom(() => {
		params.value.page++
		_baoyangRecord()
	})
	const _delBaoyang = (row) => {
		uni.showModal({
			content: '确定要删除吗？',
			success: (res) => {
				if (res.confirm) {
					delBaoyang({ baoyang_id: row.id }).then(result => {
						uni.$u.toast(result.msg)
						_baoyangRecord()
					})
				}
			}
		})
	}
	const _secondType = () => {
		secondType().then(res => {

		})
	}
	const comfirmLog = () => {
		params.value.page = 1
		_baoyangRecord()
	}
	const handleClose = () => {
		data.value.show = !data.value.show
	}
	// 确认时间选择
	const confirmTime = (row) => {
		params.value.month = uni.$u.timeFormat(row.value, 'yyyy-mm')
		data.value.timeShow = false
		params.value.page = 1
		_baoyangRecord()
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	};
	const changeTime = () => {
		data.value.timeShow = !data.value.timeShow
	}
	const _baoyangRecord = () => {
		baoyangRecord({ ...params.value }).then(res => {
			if (params.value.page == 1) {
				data.value.list = res.data.list
			} else {
				data.value.list = data.value.list.concat(res.data.list)
			}
		})
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
	}

	.popup {
		padding: 0 36rpx;

		.screen-item {
			width: 200rpx;
			height: 72rpx;
			border-radius: 12rpx;
			background: #fafafa;
			font-size: 28rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 72rpx;
		}

		.screen-item-active {
			background: #D7F0FF;
			color: #0C9BF4;
		}
	}

	::v-deep .u-row {
		flex-wrap: wrap;
	}
</style>